<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
</head>
<body>
<!--这里是MVVM中的View-->
    <div id="app">
    <!--这三种方式都能直接给元素绑定数据-->
    <!-- <p>{{ name }}</p>
    <p v-text="name"> </p>
    <p v-html="name"></p> -->
    <!--如果要给元素的属性绑定数据那就不能使用插值的语法-->
    <!-- <input type="text" value="{{name}}"> -->
    <!--虽然通过v-model 可以将数据绑定到input标签的value属性上
    但是v-model是有局限性的，v-model只能用于input/textare/select
但是在企业开发中我们可能还需要给其他表现的属性绑定数据-->
    <!-- <input type="text" v-model="name"> -->
    <!--两种写法-->
    <!-- <input type="text" v-bind:value="name"> -->
    <!-- <input type="text" :value="name"> -->
    <input type="text" :value="age+1">
</div>
<script>
//这里是MVVM中的View Model
    let vue = new Vue({
    el: '#app',
//这里是MVVM中的Model
    data: {
        name: "didi333",
        age:18
    }
    });
</script>
</body>
</html>